<template>
  <div class="app-container">
   
<el-row :gutter="12">
     <el-col :xs="24" :sm="24" :md="10" :lg="8" :xl="8"  style="border:2px solid #f2f2f2;margin-right:10px;padding:15px">
          <el-form ref="form" :inline="true" :model="uform" :rules="rules" size="small" label-width="66px">
            <div style="color:#333;padding:6px;font-size:18px">
              <span>基本信息</span>
            </div>
            <div>
            <el-form-item label="姓名" prop="name" label-width="100px">
              <el-autocomplete v-model="uform.account.name" :fetch-suggestions="querySearchAsync" @select="handleSelect" />
            </el-form-item>

            <el-form-item label="年龄" prop="age" label-width="100px">
              <el-input v-model.number="uform.account.age" />
            </el-form-item>
            </div>
            <div>
            <el-form-item label="手机号码" prop="phone" label-width="100px">
              <el-input v-model.number="uform.account.phone" />
            </el-form-item>

            <el-form-item label="身份证号" prop="idCard" label-width="100px">
              <el-input v-model="uform.account.idCard" />
            </el-form-item>
            </div>
<div>
            <el-form-item label="家庭住址" prop="address" label-width="100px">
              <el-input v-model="uform.account.address" />
            </el-form-item>
             <el-form-item label="患者来源" prop="source" label-width="100px">
              <el-select v-model="uform.account.source" class="filter-item" style="width: 120px" placeholder="患者来源">
               
                <el-option
            v-for='item in accountsourceTypes'
            :key='item.id'
            :label='item.text'
            :value='item.id'
          />
              </el-select>
            </el-form-item>

         <el-form-item label="出生日期" prop="birthday" label-width="100px">
         <el-date-picker
          v-model="uform.account.birthday"
          type="date"
          size="small"
          class="filter-item charges-date-picker"
          placeholder="出生日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
        <el-form-item label="性别" label-width="100px">
              <el-radio-group v-model="uform.account.sex" sclass="filter-item" style="width: 120px">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
</div>

            <div style="color:#333;padding:6px;font-size:18px">
              <span>就诊信息</span>
            </div>
            <div>
            <el-form-item label="接诊类型" prop="name" label-width="100px">
                      <el-radio-group 
          class="filter-item" 
          v-model="uform.consult.consultType" 
        >
          <template v-for="item in typeList">
            <el-radio-button 
              :key="item.id" 
              :label="item.id"
            >
            {{item.text}}
            </el-radio-button>
          </template>
        </el-radio-group>
            </el-form-item>
            <el-form-item label="就诊科室" prop="consultDepartId" label-width="100px">
               <el-select v-model="uform.consult.consultDepartId" class="filter-item" style="width: 120px" placeholder="就诊科室">
                <el-option
            v-for='item in collectDepts'
            :key='item.id'
            :label='item.text'
            :value='item.id'
          />
              </el-select>
            </el-form-item>
            <el-form-item label="接诊医生" prop="consultDocId" label-width="100px">
               <el-select v-model="uform.consult.consultDocId" class="filter-item" style="width: 120px" placeholder="接诊医生">
               
                <el-option
            v-for='item in users'
            :key='item.id'
            :label='item.text'
            :value='item.id'
          />
              </el-select>
            </el-form-item>
                        <el-form-item label="会员类型" prop="membershipType" label-width="100px">
              <span style="color:#DC143C">【请前往会员中心设置】</span>
            </el-form-item>
            </div>
            <div>     
</div>

 <div style="color:#333;padding:6px;font-size:18px">
              <span>其他信息</span>
            </div>

          <div>
             <el-form-item label="婚姻状况" prop="membershipType" label-width="100px">
              <el-select v-model="uform.account.membershipType" class="filter-item" style="width: 120px" placeholder="婚姻状况">
                
                 <el-option
            v-for='item in maritalstatusTypes'
            :key='item.id'
            :label='item.text'
            :value='item.id'
          />
              </el-select>
            </el-form-item>

             <el-form-item label="慢性病标志" label-width="100px">
              <el-radio-group v-model="uform.account.isChronicDisease" class="filter-item" style="width: 120px">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item> 

            <el-form-item label="民族" prop="nation" label-width="100px">
              <el-select v-model="uform.account.nation" class="filter-item" style="width: 120px" placeholder="请选择">
                
                <el-option
            v-for='item in nationTypes'
            :key='item.id'
            :label='item.text'
            :value='item.id'
          />
              </el-select>
            </el-form-item>


             <el-form-item label="过敏史" prop="allergicHistory" label-width="100px">
              <el-input v-model="uform.account.allergicHistory" />
            </el-form-item>
            <el-form-item label="个人病史" prop="personalHistory" label-width="100px">
              <el-input v-model="uform.account.personalHistory" />
            </el-form-item>
           

            <el-form-item label="慢性病史" prop="illness" label-width="100px">
              <el-input v-model="uform.account.illness" />
            </el-form-item>


          </div>
          </el-form>
          <div style="width:100%;text-align:center;margin-top:20px;margin-bottom:10px" @click="onClickSumbit()">
              <span style="color:#00BFFF;border-radius:10px;border:1px solid #00BFFF;padding:10px 20px">完成登记</span>
          </div>
     </el-col>
     <el-col :xs="24" :sm="24" :md="14" :lg="15" :xl="15" style="border:2px solid #f2f2f2;margin-left:10px;padding:15px">
          <div class="head-container">
            <eHeader :dict="dict"/>
          </div>
        <el-radio-group 
          class="filter-item" 
          v-model="query.consultStatus" 
          @change="crud.toQuery"
        >
          <template v-for="item in flagList">
            <el-radio-button 
              :key="item.id" 
              :label="item.id"
            >
            {{item.text}}
            </el-radio-button>
          </template>
        </el-radio-group>
        <div>    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading" 
      :data="crud.data"
      @selection-change="crud.selectionChangeHandler"
      @sort-change="crud.sortChange"
    >
      <el-table-column v-if="columns.visible('patientName')" label="姓名" prop="patientName"></el-table-column>
      <el-table-column v-if="columns.visible('consultStatus')" label="就诊状态" prop="consultStatus">
          <template slot-scope="scope">{{ getConsultStatus(scope.row.consultStatus) }}</template>
      </el-table-column>
      <el-table-column v-if="columns.visible('sex')" label="性别" prop="sex">
           <template slot-scope="scope">{{ getPatientSex(scope.row.sex) }}</template>
        <!-- <template slot-scope="scope">
          <housingType :wareHousingType="scope.row.wareHousingType" />
        </template> -->
      </el-table-column>
      <el-table-column v-if="columns.visible('age')" label="年龄" prop="age">
        <!-- <template slot-scope="scope">{{ formatMoney(scope.row.orderTotal, 2) }}</template> -->
      </el-table-column>
      <el-table-column v-if="columns.visible('consultDepartName')" label="科室" prop="consultDepartName"></el-table-column>
      <el-table-column v-if="columns.visible('consultDocName')" label="医生" prop="consultDocName">
        <!-- <template slot-scope="scope">{{ statusByText(scope.row.status) }}</template> -->
      </el-table-column>
      <el-table-column v-if="columns.visible('createUserName')" label="操作员" prop="createUserName"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
            <el-button
              v-permission="['admin', 'drugWareHousing:edit']"
              @click="onClickEdit(scope.row)"
              type="text"
            >患者详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination /></div>
        </el-col>

  </el-row> 

<el-dialog
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="showUserMsg"
    :title="crud.status.title"
    width="60%"
  >
          <el-form ref="form" :inline="true" :model="dform" :rules="rules" size="small" label-width="66px">
            <div style="background-color:#A7C9F1;height:30px;margin-bottom:20px;color:#fff;padding:6px">
              <span>基本信息</span>
            </div>
            <div>
            <el-form-item label="姓名" prop="patientName" label-width="100px">
              <el-input v-model="dform.patientName" />
            </el-form-item>
            <el-form-item label="性别" label-width="100px">
              <el-radio-group v-model="dform.sex" style="width: 178px">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄" prop="age" label-width="100px">
              <el-input v-model.number="dform.age" />
            </el-form-item>
            </div>
            <div>
            <el-form-item label="手机号码" prop="phone" label-width="100px">
              <el-input v-model.number="dform.phone" />
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday" label-width="100px">
                <el-input v-model.number="dform.birthday" />
        
      </el-form-item>
            <el-form-item label="身份证号" prop="idCard" label-width="100px">
              <el-input v-model="dform.idCard" />
            </el-form-item>
            </div>
           <div>
            <el-form-item label="家庭住址" prop="address" label-width="100px">
              <el-input v-model="dform.address" />
            </el-form-item>
             <el-form-item label="患者来源" prop="source" label-width="100px">
              <el-input v-model="dform.source" />
            </el-form-item>
         </div>

 <div style="background-color:#A7C9F1;height:30px;margin-bottom:20px;color:#fff;padding:6px">
              <span>就诊信息</span>
            </div>
<div><span>科室:</span>
      <el-input v-model="dform.consultDepartName" />

    <span>接诊类型:</span>
       <el-input v-model="dform.consultType" />
    <span>接诊医生:</span>
   <el-input v-model="dform.consultDocName" />
   </div>
      </el-form>
   
  </el-dialog>
    
  </div>
</template>

<script>
// import crudJob from '@/api/outpatientService/outuser'
import { getPatientSex, getConsultStatus } from "@/utils/index";
import { submit, getList, detail, del, getUserList } from '@/api/registrationMessage/registrationMessage'
import {  getCollectUses, getDepartments } from '@/api/storageRoom/drugDelivery';

import CRUD, { presenter , header, form} from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import udOperation from '@crud/UD.operation'
import { mapGetters } from 'vuex';
import eHeader from './module/header'
// crud交由presenter持有
// const crud = CRUD({
//   title: '患者信息',
//   url: 'api/use/getList',
//   sort: ['sort,asc', 'id,desc'],
//   crudMethod: { ...crudJob }
// })

let crud = CRUD({
  query: { endTime: null,consultDocId:null, startTime: null, consultType: null, sort: 'asc', 
           name: null ,departId:null,pharmacyId:null,consultStatus:1},
  hideColumns: [],
  url: "api/registration/getList",
  sort: [],
  title: "挂号信息"
});

let defaultForm = {

}
export default {
  name: 'registrationMessage',
  components: {  crudOperation, pagination, udOperation, eHeader},
  mixins: [presenter(crud), header(),form(defaultForm)],
  // 数据字典
  dicts: ['job_status'],
  data() {
    return {
        showUserMsg:false,
        collectDepts: [],
        restaurants: [],
        restaurantSelect: [],
      users: [],
        flagList: [
        {id: 1, text: '待就诊'},
        {id: 2, text: '就诊中'},
        {id: 3, text: '已完成'},
        {id: 4, text: '已取消'}
      ],
      typeList: [
        {id: 1, text: '初诊'},
        {id: 2, text: '复诊'},
        {id: 3, text: '急诊'}
      ],
      labelDtosList:[],
      permission: [
        {
          type: "add",
          permission: ["admin","user:add"],
          name: "新增患者",
          position: 1
        }
      ],
            dform:{
                source:null,
        consultType:null,
        consultDocName:null,
        age:null,
        consultComplaint:null,
        address:null,
        idCard:null,
        birthday:null,
        consultDepartId:null,
        consultDepartName:null,
        consultDocId:null,
        consultDocName:null,
        consultFlag:null,
        consultHpi:null,
        consultNo:null,
        consultStatus:null,
        consultType:null,
        createTime:null,
        createUserId:null,
        createUserName:null,
        diagnosis:null,
        id:null,
        morbidityDate:null,
        patientId:null,
        patientName:null,
        personalHistory:null,
        pharmacyId:null,
        phone:null,
        remark:null,
        sex:null,
        updateUserId:null,
        updateUserName:null,
      },
      uform: {
          account:{
    address: "",
	age: 0,
    allergicHistory:'',
	birthday: null,
	createTime: "",
	id: null,
	idCard: "",
	illness: "",
	isChronicDisease: 1,
	maritalStatus: '',
	membershipType: "0",
	name: "",
	nation: "",
	occupation: "",
    personalHistory:'',
	pharmacyId: "",
	phone: "",
	remark: "",
	sex: 1,
	source: "",
	status: 0,
	wechat: "",
	workUnit: ""
          },
     consult:{
        consultComplaint: "",
		consultDepartId: "",
		consultDepartName: "",
		consultDocId: "",
		consultDocName: "",
		consultFlag: 1,
		consultHpi: "",
		consultNo: "",
		consultStatus: 0,
		consultType: 1,
		createTime: "",
		createUserId: "",
		createUserName: "",
		diagnosis: "",
		id: null,
		patientId: "",
		patientName: "",
		personalHistory: "",
		pharmacyId: "",
		remark: "",
		updateUserId: "",
		updateUserName: ""
          }
    },
  rules: {
       
        sort: [
          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
        ],
        dept: { required: true, message: '所属部门不能为空', trigger: 'select' }
      },

    showBatchImport: false,
    showUserMsg: false,
    }
  },
    computed: {
    ...mapGetters(["workunitTypes"]),
    ...mapGetters(["nationTypes"]),
    ...mapGetters(["maritalstatusTypes"]),
    ...mapGetters(["accountsourceTypes"]),
  },
     mounted() {
     
  },
    created() {
    this._getDepartments();
    this._getCollectUses();
  },
  methods: {
    getPatientSex,
    getConsultStatus,
    onClickEdit(e){

          detail(e.id).then(res => {
        // this.data = res;
        this.showUserMsg = true;
        this.dform.patientName = res.account.name;
        this.dform.age = res.account.age;
        this.dform.address = res.account.address;
        this.dform.sex = res.account.sex;
        this.dform.birthday = res.account.birthday;
        this.dform.phone = res.account.phone;
        this.dform.idCard = res.account.idCard;
        this.dform.source = res.account.source;
        this.dform.consultDepartName = res.consult.consultDepartName;
        this.dform.consultDocName = res.consult.consultDocName;
        this.dform.consultType = res.consult.consultType;
      
      });
    },
    querySearchAsync(queryString, cb){
        this.restaurants = [];
        var userForm = { endTime: null,memberId:null, startTime: null, pharmacyId: null, sort: 'asc', 
           name: queryString };
        getUserList(userForm).then(res => {
         var userListData = res.content;
         userListData.forEach(item=>{
             item.value = item.name ;
             this.restaurants.push(item);
         });
         var result = this.restaurants;
         cb(result);

        });
    },
    handleSelect(e){
        this.uform.account.address = e.address;
        this.uform.account.age = e.age;
        this.uform.account.allergicHistory = e.allergicHistory;
        this.uform.account.birthday = e.birthday;
        this.uform.account.createTime = e.createTime;
        this.uform.account.id = e.id;
        this.uform.account.idCard = e.idCard;
        this.uform.account.illness = e.illness;
        this.uform.account.isChronicDisease = e.isChronicDisease;
        this.uform.account.maritalStatus = e.maritalStatus;
        this.uform.account.membershipType = e.membershipType;
        this.uform.account.name = e.name;
        this.uform.account.nation = e.nation;
        this.uform.account.occupation = e.occupation;
        this.uform.account.personalHistory = e.personalHistory;
        this.uform.account.phone = e.phone;
        this.uform.account.remark = e.remark;
        this.uform.account.sex = e.sex;
        this.uform.account.source = e.source;
        this.uform.account.status = e.status;
        this.uform.account.wechat = e.wechat;
        this.uform.account.workUnit = e.workUnit;

    },        
    onClickSumbit(){
          
        //   if(this.uform.id != null){
            
    var dataform = {
        account:{
    address: this.uform.account.address,
	age: this.uform.account.age,
    allergicHistory: this.uform.account.allergicHistory,
	birthday: this.uform.account.birthday,
	createTime: this.uform.account.createTime,
	id: this.uform.account.id,
	idCard: this.uform.account.idCard,
	illness: this.uform.account.illness,
	isChronicDisease: this.uform.account.isChronicDisease,
	maritalStatus: this.uform.account.maritalStatus,
	membershipType: this.uform.account.membershipType,
	name: this.uform.account.name,
	nation: this.uform.account.nation,
	occupation: this.uform.account.occupation,
    personalHistory: this.uform.consult.personalHistory,
	// pharmacyId: this.uform.account.pharmacyId,
	phone: this.uform.account.phone,
	remark: this.uform.account.remark,
	sex: this.uform.account.sex,
	source: this.uform.account.source,
	status: this.uform.account.status,
	wechat: this.uform.account.wechat,
	workUnit: this.uform.account.workUnit
    },	
    consult:{
        consultComplaint: this.uform.consult.consultComplaint,
		consultDepartId: this.uform.consult.consultDepartId,
		consultDepartName: this.uform.consult.consultDepartName,
		consultDocId: this.uform.consult.consultDocId,
		consultDocName: this.uform.consult.consultDocName,
		consultFlag: 1,
		consultHpi: this.uform.consult.consultHpi,
		consultNo: this.uform.consult.consultNo,
		consultStatus: 1,
		consultType: this.uform.consult.consultType,
        // consultType: 1,
		createTime: this.uform.consult.createTime,
		createUserId: this.uform.consult.createUserId,
		createUserName: this.uform.consult.createUserName,
		diagnosis: this.uform.consult.diagnosis,
		id: this.uform.account.id,
		patientId: this.uform.consult.patientId,
		patientName: this.uform.consult.patientName,
		personalHistory: this.uform.consult.personalHistory,
		// pharmacyId: this.uform.consult.pharmacyId,
		remark: this.uform.consult.remark,
		updateUserId: this.uform.consult.updateUserId,
		updateUserName: this.uform.consult.updateUserName
    }
  };
  submit(dataform).then(res => {
        // this.data = res;
        this.showUserMsg = false;
        this.crud.toQuery();
      });


    },
    onClickLabelsSubmie(data,row){
      var formdata = {
        accountId:row.id,
        labelId:data.id,
        createTime:'',
        id:data.rid != null? data.rid:null
      };
       lableSubmit(formdata).then(res => {
         this.crud.toQuery();
      });
    },

    _getDepartments() {
      getDepartments().then(res => {
        res.forEach(item => {
          this.collectDepts.push({
            id: item.id + "",
            text: item.departmentName
          });
        });
      });
    },
    _getCollectUses() {
      getCollectUses().then(res => {
        res.content.forEach(item => {
          this.users.push({
            id: item.id + "",
            text: item.username
          });
        });
      });
    },

    
    onClickItemEdit(e){
       if(e.labelDtos.length> 0){
         e.labelDtos.forEach(val => {
 
      let contentobj = this.labelDtosList.find((item) => {
        return item.id === val.labelId;
      });
      contentobj.accountId = val.accountId;
      contentobj.rid = val.id;
        })
       }
    },
        onOperateRow(id,operate) {
          this.uform = operate;
    },
        onRowHandle(btn) {
      btn.handle.apply(this, btn.params)
    },

        [CRUD.HOOK.dataLoadSuccess](crud, data) {
    //      this.labelDtosList = [];
    //         getLabels().then(res => {
    //           res.forEach(item=>{
    //   this.labelDtosList.push(item)
    //           })
    //        console.log("lables:::::::",this.labelDtosList);
    //   });
    //   data.forEach(item => {
    //     item.btns = this._operateBtns(item);
    //   });
    },
    [CRUD.HOOK.afterRefresh]() {
      
    },
        _operateBtns(item) {
      let res = [];
      res.push({ text: "编辑", handle: this.onOperateRow, params: [1,item] });
    res.push({ text: "预约挂号", handle: this.onOperateRow, params: [2,item] });
    res.push({ text: "历史病历", handle: this.onOperateRow, params: [3,item] });

      return res;
    },
       onBatchImportSuccess() {
      this.showBatchImport=false;
      this.crud.toQuery();
      this.searchCountByDrugType();
    },
     onBatchImport(e) {
    //    if(e == 0){
// this.showUserMsg = true;
// this.uform = {	
//   address: "",
// 	age: 0,
// 	birthday: null,
// 	createTime: "",
// 	id: null,
// 	idCard: "",
// 	illness: "",
// 	isChronicDisease: 1,
// 	maritalStatus: '',
// 	membershipType: "0",
// 	name: "",
// 	nation: "",
// 	occupation: "",
// 	pharmacyId: "",
// 	phone: "",
// 	remark: "",
// 	sex: 1,
// 	source: "",
// 	status: 0,
// 	wechat: "",
// 	workUnit: ""};
//        }else{
// this.showBatchImport = true;
//        }
      
    },
    // 改变状态
    changeEnabled(data, val) {
      this.$confirm('此操作将 "' + this.dict.label.job_status[val] + '" ' + data.name + '岗位, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crud.crudMethod.edit(data).then(() => {
          crud.notify(this.dict.label.job_status[val] + '成功', 'success')
        }).catch(err => {
          data.enabled = !data.enabled
        })
      }).catch(() => {
        data.enabled = !data.enabled
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
